import React from 'react';
import './index.css';

type PositonItem = {
    label: string; // 展示title
    id: string;   // 对应element selecter
    [keyName: string]: any;
}

type PositonLayerProps = {
    positionList: PositonItem[];
    top: number; // 上面空白不显示的高度
}
class PositonLayer extends React.Component<Props & PositonLayerProps, State> {
    static defaultProps = {
        top: 0,
        positionList: []
    }
    constructor(props) {
        super(props)
        this.state = {
            active: '老师',
            positionList: [],
        }
    }
    scrollToAnchor = (item) => {
        // 找到锚点
        let anchorElement = document.getElementById(item.id);
        // 如果对应id的锚点存在，就跳转到锚点
        //scrollIntoView让页面滚动到对应可视化区域内
        if (anchorElement) {
            this.setState({
                active: item.label
            })
            document.body.scrollTo(0, anchorElement.offsetTop - 40);
        }
    }
    componentDidMount() {
        this.initPositionList();
        window.addEventListener("scroll", this.handleScrollTo, true);
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScrollTo, true);
    }
    initPositionList() {
        const plist = this.props.positionList;
        let newPlist: PositonItem[] = [];
        for(let i = 0; i < plist.length; i++) {
            let item: PositonItem = plist[i];
            let dom = document.getElementById(item.id);
            if(dom) {
                newPlist.push({
                    ...item,
                    dom: dom
                })
            }
        }
        this.setState({
            positionList: newPlist
        })
    }
    // 滚动显示
    handleScrollTo = (e) => {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        let show = scrollTop && scrollTop >= this.props.top;
        let plist = this.state.positionList;
        // 如果显示
        if(show) {
            for(let i = plist.length - 1; i > -1; i--) {
                let item = plist[i];
                if(scrollTop >= item.dom.offsetTop - 40 ) {
                    this.setState({
                        positonShow: show,
                        active: item.label
                    })
                    return;
                }
            }
        }else {
            this.setState({
                positonShow: show
            })
        }
    }

    render() {
        let { positionList, positonShow, active } = this.state
        return (
            positionList.length > 1 &&
            <div className={`position-top ${positionList.length > 0 && positonShow ? 'active' : ''}`}>
                <ul>
                    {
                        positionList.map((item: PositonItem) => (
                            <li 
                                key={item.label} 
                                onClick={() => this.scrollToAnchor(item)}
                            >
                                <span>
                                    {
                                        active === item.label &&
                                        <i className="iconfont icondingwei"></i>
                                    }
                                    {item.label}
                                </span>
                            </li>
                        ))
                    }
                </ul>
            </div>
        )
    }
}

export default PositonLayer;